import React, { Component, Fragment } from 'react';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import { Icon, Steps, Card, Popover, Badge } from 'antd';
import classNames from 'classnames';
import styles from './TestRecordDetail.less';
const { Step } = Steps;

@connect(({ testrecord, loading }) => ({
  loading: loading.effects['testrecord/queryVersionRecord'],
}))
export default class TestRecordDetail extends Component {
  state = {
    stepDirection: 'horizontal'
  };

  componentDidMount() {
    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setStepDirection);
    this.setStepDirection.cancel();
  }

  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  current = testRecord => {
    let current = 1;
    if (testRecord) {
      let testStatus = testRecord.testStatus;
      if (_.indexOf([1, 3], testStatus) > -1) {
        current = 1
      } else if (_.indexOf([2, 4], testStatus) > -1) {
        current = 2
      } else if (_.indexOf([5], testStatus) > -1) {
        current = 3
      }
    }
    return current;
  }

  status = testRecord => {
    let status = '';
    if (testRecord) {
      let testStatus = testRecord.testStatus;
      if (_.indexOf([3, 4], testStatus) > -1) {
        status = 'error';
      } 
    }
    return status;
  }

  firstStep = testRecord => {
    const recordCreator = testRecord ? `${testRecord.createRealName}` : '';
    const recordCreateTime = testRecord ? testRecord.testCreateTime : '';
    const description = (
      <div className={classNames(styles.textSecondary, styles.stepDescription)}>
        <Fragment>
          {recordCreator}
          <Icon type="dingding-o" style={{ marginLeft: 8 }} />
        </Fragment>
        <div>{recordCreateTime}</div>
      </div>
    );
    return <Step title="发起提测" description={description} />
  }

  secondStep = (testRecord, users) => {
    let testStatus = testRecord ?  testRecord.testStatus : 0;
    let checkResult = '';
    let stepStatus = 'default';
    if(testStatus === 3){
      checkResult = "审核结果：打回";
      stepStatus = 'error';
    }else if(testStatus > 1){
      checkResult = "审核结果：通过";
      stepStatus = 'finish';
    }else if(testStatus === 1){
      stepStatus = 'process';
    }
    let tip = null;
    let pm = users ? users.pm:[];
    let members = pm.map(user => {
      return <span key={`pm${user.id}`}><span key={user.id}>{`${user.realName}`}<Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} /></span><br/></span>
    });
    if(testStatus === 1 ){
      tip = <div>(<a onClick={this.remindUser.bind(this,pm)}>催一下</a>)</div>
    }
    const description = (
      <div className={styles.stepDescription}>
        <Fragment>
          {checkResult}<br/>
          {members}
        </Fragment>
        {tip}
      </div>);
    return <Step title="产品体验" description={description} status={stepStatus} />
  }

  thirdStep = (testRecord, users) => {
    let tester = users ? users.tester : [];
    let testStatus = testRecord ? testRecord.testStatus : 0;
    let checkResult = '';
    let stepStatus = 'default';
    let tip = null;
    if(testStatus === 4){
      checkResult = "审核结果：打回";
      stepStatus = 'error';
    }else if(testStatus > 4){
      checkResult = "审核结果：通过";
      stepStatus = 'finish';
    }else if(testStatus === 2){
      stepStatus = 'process';
    }else if(testStatus === 1 || testStatus === 3){
      stepStatus = 'wait';
    }
    let members = tester.map(user => {
      return <span key={`tester${user.id}`}><span key={user.id}>{`${user.realName}`}<Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} /></span><br/></span>
    });
    if(testStatus === 2 ){
      tip = <div>(<a onClick={this.remindUser.bind(this,tester)}>催一下</a>)</div>
    }
    const description = (
      <div className={styles.stepDescription}>
        <Fragment>
          {checkResult}<br/>
          {members}
          
        </Fragment>
      </div>
    );
    return <Step title="测试审核" description={description} status={stepStatus}/>
  }

  fourthStep = (version, testRecord) => {
    let testStatus = testRecord ? testRecord.testStatus : 0;
    let stepStatus = 'default';
    if(testStatus < 5){
      stepStatus = 'wait';
    }else if(testStatus === 5){
      stepStatus = 'finish';
    }
    const expectReleaseTime = version ? version.expectVersionReleaseTime : '';
    const description = (
      <div className={classNames(styles.textSecondary, styles.stepDescription)}>
        <Fragment>预发布日期</Fragment>
        <div>{expectReleaseTime}</div>
      </div>
    );
    return <Step title="提测完成" description={description} status={stepStatus} />
  }

  remindUser = (user) =>{
   // console.log('click..',user)
    let mobile = user[0].mobile
    this.props.dispatch(
      {
        type:'testrecord/callUser',
        payload:{
          mobile: mobile,
          projectName:this.props.testRecord.projectName
        }
      }
    )
  }

  render() {
    const { testRecord, version, users } = this.props;

    return (
      <Card title="提测进度" style={{ marginBottom: 24 }} bordered={true}>
        <Steps direction={this.stepDirection} progressDot={true} current={this.current(testRecord)} status={this.status(testRecord)}>
          {this.firstStep(testRecord)}
          {this.secondStep(testRecord, users)}
          {this.thirdStep(testRecord, users)}
          {this.fourthStep(version, testRecord)}
        </Steps>
      </Card>

    );
  }
}
